// import { TiptapCollabProvider } from '@hocuspocus/provider';
import { HocuspocusProvider as TiptapCollabProvider } from '@hocuspocus/provider';
import * as Y from 'yjs';
import Editor from './EditorComponent';
import './style.scss';

const appId = process.env.TIPTAP_APP_ID!;
const token = process.env.TIPTAP_TOKEN;

const room = `room.${new Date().getFullYear().toString().slice(-2)}${
	new Date().getMonth() + 1
}${new Date().getDate()}-ok`;

const ydocA = new Y.Doc();
const providerA = new TiptapCollabProvider({
	// appId,
	name: room,
	document: ydocA,
	// token
	url: 'ws://127.0.0.1:1234'
});

const ydocB = new Y.Doc();
const providerB = new TiptapCollabProvider({
	// appId,
	name: room,
	document: ydocB,
	// token
	url: 'ws://127.0.0.1:1234'
});

function TipTapEditor() {
	return (
		<div className="col-group">
			{/* @ts-ignore*/}
			<Editor provider={providerA} ydoc={ydocA} room={room} />
			{/* @ts-ignore*/}
			<Editor provider={providerB} ydoc={ydocB} room={room} />
		</div>
	);
}

export default TipTapEditor;
